<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .img-list {
        width: 100%;
        min-width: 1000px;
        height: 155px;
        position: relative;
        overflow: hidden;
    }
    
    .img-list .layer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<body>
    <section class="img-list">
        <div class="layer">
            <img width="3000" height="250" src="./assets/1.png" alt="" />
        </div>
        <div class="layer">
            <img width="1800" height="165" src="./assets/2_1.png" alt="" />
        </div>
        <div class="layer">
            <img width="3000" height="250" src="./assets/3.png" alt="" />
        </div>
        <div class="layer">
            <img width="1800" height="150" src="./assets/4.png" alt="" />
        </div>
        <div class="layer">
            <img width="1800" height="165" src="./assets/5.png" alt="" />
        </div>
        <div class="layer">
            <img width="1950" height="178" src="./assets/6.png" alt="" />
        </div>
    </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
    const imgList = $(".img-list .layer img");
    const defaultStyles = [{
        translateX: 0,
        translateY: 0,
        blur: 4,
    }, {
        translateX: 0,
        translateY: 0,
        blur: 0,
    }, {
        translateX: -50,
        translateY: 0,
        blur: 1,
    }, {
        translateX: 0,
        translateY: 4.2,
        blur: 4,
    }, {
        translateX: 0,
        translateY: -1.8,
        blur: 5,
    }, {
        translateX: 0,
        translateY: 0,
        blur: 6,
    }, ];

    function setDefaultImgStyle() {
        for (let i = 0; i < imgList.length; i++) {
            const imgItem = imgList[i];
            const defaultStyle = defaultStyles[i];
            const {
                translateX,
                translateY,
                blur
            } = defaultStyle;
            // 设置位置偏移以及高斯模糊
            $(imgItem).css({
                // 位置偏移
                transform: `translate(${translateX}px, ${translateY}px)`,
                // 高斯模糊
                filter: `blur(${blur}px)`,
            });
        }
    }
    setDefaultImgStyle();

    function setShakeAnimation() {
        // 第二张小女孩图片
        const imgGirl = $(".img-list .layer:nth-child(2) img");

        // 每 3 秒眨一次眼睛
        setInterval(() => {
            // 半闭眼
            $(imgGirl).attr("src", "./assets/2_2.png");

            // 100 毫秒后完全闭上眼眼睛
            setTimeout(() => {
                $(imgGirl).attr("src", "./assets/2_3.png");
            }, 100);

            // 300 毫秒后半睁开眼睛
            setTimeout(() => {
                $(imgGirl).attr("src", "./assets/2_2.png");
            }, 300);

            // 400 毫秒后完全睁开眼睛
            setTimeout(() => {
                $(imgGirl).attr("src", "./assets/2_1.png");
            }, 400);
        }, 3000);
    }
    setShakeAnimation();

    // 鼠标左移后的最终目标位置
    const leftStyles = [{
        translateX: 0,
        translateY: 0,
        blur: 0,
    }, {
        translateX: -9,
        translateY: 0,
        blur: 10,
    }, {
        translateX: -80,
        translateY: 0,
        blur: 5,
    }, {
        translateX: -36,
        translateY: 4.2,
        blur: 13,
    }, {
        translateX: -78,
        translateY: -1.8,
        blur: 14,
    }, {
        translateX: -97,
        translateY: 0,
        blur: 12,
    }, ];

    function setLeftImgStyle(offsetRatio) {
        for (let i = 0; i < imgList.length; i++) {
            const imgItem = imgList[i];
            const {
                translateX: defaultTranslateX,
                translateY: defaultTranslateY,
                blur: defaultBlur,
            } = defaultStyles[i];
            const leftStyle = leftStyles[i];
            // 根据移动比例计算最终坐标和高斯模糊值
            const translateX =
                (leftStyle.translateX - defaultTranslateX) * offsetRatio +
                defaultTranslateX;
            const blur = (leftStyle.blur - defaultBlur) * offsetRatio + defaultBlur;

            // 设置位置偏移以及高斯模糊
            $(imgItem).css({
                // 位置偏移
                transform: `translate(${translateX}px, ${defaultTranslateY}px)`,
                // 高斯模糊
                filter: `blur(${blur}px)`,
            });
        }
    }

    // 鼠标右移后的最终目标位置
    const rightStyles = [{
        translateX: 0,
        translateY: 0,
        blur: 8,
    }, {
        translateX: 9,
        translateY: 0,
        blur: 8,
    }, {
        translateX: 21,
        translateY: 0,
        blur: 4,
    }, {
        translateX: 35,
        translateY: 4.2,
        blur: [0, 4],
    }, {
        translateX: 77,
        translateY: -1.8,
        blur: [0, 4],
    }, {
        translateX: 96,
        translateY: 0,
        blur: 0,
    }, ];

    function setRightImgStyle(offsetRatio) {
        for (let i = 0; i < imgList.length; i++) {
            const imgItem = imgList[i];
            const {
                translateX: defaultTranslateX,
                translateY: defaultTranslateY,
                blur: defaultBlur,
            } = defaultStyles[i];
            const rightStyle = rightStyles[i];
            let rightBlur = rightStyle.blur;
            let blur = defaultBlur;
            // 根据移动比例计算最终坐标和高斯模糊值
            const translateX =
                (rightStyle.translateX - defaultTranslateX) * offsetRatio +
                defaultTranslateX;
            if (Array.isArray(rightBlur)) {
                const targetBlur = offsetRatio < 0.5 ? rightBlur[0] : rightBlur[1];
                const ratio =
                    offsetRatio < 0.5 ? offsetRatio * 2 : (offsetRatio - 0.5) * 2;
                const currentBlur = offsetRatio < 0.5 ? defaultBlur : rightBlur[0];
                blur = (targetBlur - currentBlur) * ratio + currentBlur;
            } else {
                blur = (rightBlur - defaultBlur) * offsetRatio + defaultBlur;
            }
            // 设置位置偏移以及高斯模糊
            $(imgItem).css({
                // 位置偏移
                transform: `translate(${translateX}px, ${defaultTranslateY}px)`,
                // 高斯模糊
                filter: `blur(${blur}px)`,
            });
        }
    }

    // 屏幕宽度
    const width = document.body.clientWidth;
    // 鼠标进入的事件
    $(".img-list").mouseenter((e) => {
        // 鼠标离开时解除事件监听，并重置状态
        $(".img-list").mouseleave(() => {
            setDefaultImgStyle();
            $(".img-list").off("mousemove");
            $(".img-list").off("mouseleave");
        });

        // 鼠标进入时记录位置
        const originalX = e.pageX;
        $(".img-list").mousemove((e) => {
            // 鼠标移动时记录位置
            const currentX = e.pageX;
            // 根据屏幕宽度和移动距离，计算移动的比例
            const offsetRatio = (currentX - originalX) / width;
            // 鼠标左移
            if (offsetRatio < 0) {
                setLeftImgStyle(Math.abs(offsetRatio));
                // 鼠标右移
            } else {
                setRightImgStyle(offsetRatio);
            }
        });
    });
</script>

</html>